import { defineComponent, inject } from "vue";
import "./listItem.scss";
const listItem = defineComponent({
  props: {
    postItem: {
      type: Object,
      default: () => {},
    },
  },
  setup(props) {
    const content = props.postItem;
    const showPostDetail =
      inject<(id: number) => Promise<void>>("showPostDetail");
    const handlePassPost = inject<(id: number) => void>("handlePassPost");
    const handleDeletePost = inject<(id: number) => void>("handleDeletePost");
    return () => (
      <div class="postListItem">
        <div class="conUserInfo">
          <div class="userImg">
            <img src={content.avatarUrl} alt="" />
          </div>
          <div class="userText">
            <div class="userName">{content.username}</div>
            <div class="userId">帖子ID: {content.id}</div>
          </div>
        </div>
        <div class="content">
          <div class="contentJson">
            <div class="key">帖子类型</div>
            <div class="value">{content.type}</div>
          </div>
          <div class="contentJson">
            <div class="key">{content.title ? "帖子标题" : "帖子内容"}</div>
            <div class="value">{content.title || content.content}</div>
          </div>
          <div class="contentJson">
            <div class="key">发布日期</div>
            <div class="value">{content.date}</div>
          </div>
        </div>
        <div class="conBth">
          <el-button
            type="success"
            plain
            size="small"
            onClick={() => handlePassPost!(content.id)}
          >
            通过
          </el-button>
          <el-button
            type="primary"
            plain
            size="small"
            onClick={() => showPostDetail!(content.id)}
          >
            详情
          </el-button>
          <el-button
            type="danger"
            plain
            size="small"
            onClick={() => handleDeletePost!(content.id)}
          >
            删除
          </el-button>
        </div>
      </div>
    );
  },
});

export default listItem;
